﻿@page "/chart/bollinger"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a stock chart with candle series and a bollinger band indicator. The trackball shows the information about the stock, signal line, upper line, and lower line value of a day.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure a bollinger band indicator. The bollinger band indicator shows the upper and lower limits of normal price movements based on the standard deviation of prices.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the bollinger band indicator can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators/#bollinger-band'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL - 2012-2017" Theme="@Theme">
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Months" ZoomFactor="0.2" ZoomPosition="0.6">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price (in Million)" LabelFormat="${value}M" Minimum="50" Maximum="170" Interval="30">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartZoomSettings EnableDeferredZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true" Mode="ZoomMode.X"></ChartZoomSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Period" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open"
                         Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" BearFillColor="#2ecd71" BullFillColor="#e74c3d">
                <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartIndicators>
            <ChartIndicator Type="TechnicalIndicators.BollingerBands" Field="FinancialDataFields.Close" SeriesName="Apple Inc" Fill="#606eff" Period="14">
                <ChartIndicatorLowerLine Color="#f2ec2f" Width="1"></ChartIndicatorLowerLine>
                <ChartIndicatorUpperLine Color="#ffb735" Width="1"></ChartIndicatorUpperLine>
                <ChartIndicatorAnimation Enable="true"></ChartIndicatorAnimation>
            </ChartIndicator>
        </ChartIndicators>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public BollingerChartData[] ChartPoints { get; set; } = new BollingerChartData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<BollingerChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class BollingerChartData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }
}
